<?php
/**
 * Created by PhpStorm.
 * User: eric
 * Date: 11/28/14
 * Time: 18:58
 */
$this->title = Yii::t('app', 'buttons');
$this->params['breadcrumbs'][] = ['label' => Yii::t('app', 'samples'), 'url' => ['index']];
$this->params['breadcrumbs'][] = $this->title;
?>
<!--BEGIN HEADER-->
<div class="section-header">
    <h3 class="text-standard"><i class="fa fa-fw fa-arrow-circle-right text-gray-light"></i> <?=$this->title?> <small><?=$this->subTitle?></small></h3>
</div>
<!--END HEADER-->
<div class="section-body">
    <div class="row">

    <!-- START BASIC BUTTONS -->
    <div class="col-lg-6">
        <div class="box">
            <div class="box-head">
                <header><h4 class="text-light">Basic <strong>buttons</strong></h4></header>
            </div>
            <div class="box-body text-center">
                <p>
                    <button type="button" class="btn btn-default">Default</button>
                    <button type="button" class="btn btn-primary">Primary</button>
                    <button type="button" class="btn btn-info">Info</button>
                    <button type="button" class="btn btn-success">Success</button>
                    <button type="button" class="btn btn-warning">Warning</button>
                    <button type="button" class="btn btn-danger">Danger</button>
                </p>
                <p>
                    <button type="button" class="btn btn-inverse">Inverse</button>
                    <button type="button" class="btn btn-support1">Support 1</button>
                    <button type="button" class="btn btn-support2">Support 2</button>
                    <button type="button" class="btn btn-support3">Support 3</button>
                    <button type="button" class="btn btn-support4">Support 4</button>
                    <button type="button" class="btn btn-support5">Support 5</button>
                </p>
            </div><!--end .box-body -->
        </div><!--end .box -->
    </div><!--end .col-lg-6 -->
    <!-- END BASIC BUTTONS -->
        <!-- START ROUNDED BUTTONS -->
        <div class="col-lg-6">
            <div class="box box-underline">
                <div class="box-head">
                    <header><h4 class="text-light">Rounded basic <strong>buttons</strong></h4></header>
                </div>
                <div class="box-body text-center">
                    <p>
                        <button type="button" class="btn btn-rounded btn-default">Default</button>
                        <button type="button" class="btn btn-rounded btn-primary">Primary</button>
                        <button type="button" class="btn btn-rounded btn-info">Info</button>
                        <button type="button" class="btn btn-rounded btn-success">Success</button>
                        <button type="button" class="btn btn-rounded btn-warning">Warning</button>
                        <button type="button" class="btn btn-rounded btn-danger">Danger</button>
                    </p>
                    <p>
                        <button type="button" class="btn btn-rounded btn-inverse">Inverse</button>
                        <button type="button" class="btn btn-rounded btn-support1">Support 1</button>
                        <button type="button" class="btn btn-rounded btn-support2">Support 2</button>
                        <button type="button" class="btn btn-rounded btn-support3">Support 3</button>
                        <button type="button" class="btn btn-rounded btn-support4">Support 4</button>
                        <button type="button" class="btn btn-rounded btn-support5">Support 5</button>
                    </p>
                </div><!--end .box-body -->
            </div><!--end .box -->
        </div><!--end .col-lg-6 -->
        <!-- END ROUNDED BUTTONS -->
</div><!--end .row -->

    <div class="row">

    <!-- START BUTTON SIZE -->
    <div class="col-lg-12">
        <div class="box box-underline">
            <div class="box-head">
                <header><h4 class="text-light">Button <strong>sizes</strong></h4></header>
            </div>
            <div class="box-body text-center">
                <div class="row">
                    <div class="col-lg-6">
                        <p>
                            <button type="button" class="btn btn-primary btn-xs">Extra small</button>
                            <button type="button" class="btn btn-primary btn-sm">Small</button>
                            <button type="button" class="btn btn-primary">Normal</button>
                            <button type="button" class="btn btn-primary btn-lg">Large</button>
                            <button type="button" class="btn btn-primary btn-rounded btn-lg btn-equal"><i class="fa fa-expand"></i></button>
                            <button type="button" class="btn btn-primary btn-rounded btn-equal"><i class="fa fa-arrows-h"></i></button>
                            <button type="button" class="btn btn-primary btn-rounded btn-sm btn-equal"><i class="fa fa-compress"></i></button>
                            <button type="button" class="btn btn-primary btn-rounded btn-xs btn-equal"><i class="fa fa-arrows-v"></i></button>
                        </p>
                    </div>
                    <div class="col-lg-6">
                        <div class="btn-group">
                            <button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown">
                                Actions <i class="fa fa-caret-down"></i>
                            </button>
                            <ul class="dropdown-menu animation-zoom" role="menu" style="text-align: left;">
                                <li><a href="#"><i class="fa fa-plus"></i> Add</a></li>
                                <li><a href="#"><i class="fa fa-pencil"></i> Edit</a></li>
                                <li><a href="#"><i class="fa fa-copy"></i> Copy</a></li>
                                <li><a href="#"><i class="fa fa-print"></i> Print</a></li>
                                <li class="divider"></li>
                                <li><a href="#"><i class="fa fa-times icon-style-danger"></i> Remove item</a></li>
                            </ul>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                Actions <i class="fa fa-caret-down"></i>
                            </button>
                            <ul class="dropdown-menu animation-slide" role="menu" style="text-align: left;">
                                <li><a href="#"><i class="fa fa-plus"></i> Add</a></li>
                                <li><a href="#"><i class="fa fa-pencil"></i> Edit</a></li>
                                <li><a href="#"><i class="fa fa-copy"></i> Copy</a></li>
                                <li><a href="#"><i class="fa fa-print"></i> Print</a></li>
                                <li class="divider"></li>
                                <li><a href="#"><i class="fa fa-times icon-style-danger"></i> Remove item</a></li>
                            </ul>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-support1">Actions</button>
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><i class="fa fa-caret-down"></i></button>
                            <ul class="dropdown-menu animation-dock" role="menu" style="text-align: left;">
                                <li><a href="#"><i class="fa fa-plus"></i> Add</a></li>
                                <li><a href="#"><i class="fa fa-pencil"></i> Edit</a></li>
                                <li><a href="#"><i class="fa fa-copy"></i> Copy</a></li>
                                <li><a href="#"><i class="fa fa-print"></i> Print</a></li>
                                <li class="divider"></li>
                                <li><a href="#"><i class="fa fa-times icon-style-danger"></i> Remove item</a></li>
                            </ul>
                        </div>
                        <div class="btn-group dropup">
                            <button type="button" class="btn btn-primary">Actions</button>
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><i class="fa fa-caret-up"></i></button>
                            <ul class="dropdown-menu animation-zoom" role="menu" style="text-align: left;">
                                <li><a href="#"><i class="fa fa-plus"></i> Add</a></li>
                                <li><a href="#"><i class="fa fa-pencil"></i> Edit</a></li>
                                <li><a href="#"><i class="fa fa-copy"></i> Copy</a></li>
                                <li><a href="#"><i class="fa fa-print"></i> Print</a></li>
                                <li class="divider"></li>
                                <li><a href="#"><i class="fa fa-times icon-style-danger"></i> Remove item</a></li>
                            </ul>
                        </div>
                        <div class="btn-group dropup">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-wrench"></i> Actions <i class="fa fa-caret-up"></i>
                            </button>
                            <ul class="dropdown-menu pull-right animation-slide" role="menu" style="text-align: left;">
                                <li><a href="#"><i class="fa fa-plus"></i> Add</a></li>
                                <li><a href="#"><i class="fa fa-pencil"></i> Edit</a></li>
                                <li><a href="#"><i class="fa fa-copy"></i> Copy</a></li>
                                <li><a href="#"><i class="fa fa-print"></i> Print</a></li>
                                <li class="divider"></li>
                                <li><a href="#"><i class="fa fa-times icon-style-danger"></i> Remove item</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div><!--end .box-body -->
        </div><!--end .box -->
    </div><!--end .col-lg-12 -->
    <!-- END BUTTON SIZE -->

</div><!--end .row -->
    <div class="row">

    <!-- START BUTTON TOOLBAR -->
    <div class="col-lg-4">
        <div class="box box-underline">
            <div class="box-head">
                <header><h4 class="text-light">Button <strong>toolbar</strong></h4></header>
            </div>
            <div class="box-body text-center">
                <div class="btn-group">
                    <button type="button" class="btn btn-default btn-equal"><i class="fa fa-align-left"></i></button>
                    <button type="button" class="btn btn-default btn-equal"><i class="fa fa-align-center"></i></button>
                    <button type="button" class="btn btn-default btn-equal"><i class="fa fa-align-right"></i></button>
                    <button type="button" class="btn btn-default btn-equal"><i class="fa fa-bold"></i></button>
                    <button type="button" class="btn btn-default btn-equal"><i class="fa fa-italic"></i></button>
                    <button type="button" class="btn btn-default btn-equal"><i class="fa fa-underline"></i></button>
                    <div class="btn-group">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-wrench"></i> <i class="fa fa-caret-down"></i>
                        </button>
                        <ul class="dropdown-menu" role="menu" style="text-align: left;">
                            <li><a href="#"><i class="fa fa-cut"></i> Cut</a></li>
                            <li><a href="#"><i class="fa fa-copy"></i> Copy</a></li>
                            <li><a href="#"><i class="fa fa-paste"></i> Paste</a></li>
                            <li class="divider"></li>
                            <li><a href="#"><i class="fa fa-eraser icon-style-danger"></i> Erase</a></li>
                        </ul>
                    </div>
                </div>
            </div><!--end .box-body -->
        </div><!--end .box -->
    </div><!--end .col-lg-4 -->
    <!-- END BUTTON TOOLBAR -->

    <!-- START LOADING BUTTONS -->
    <div class="col-lg-4">
        <div class="box box-underline">
            <div class="box-head">
                <header><h4 class="text-light">Loading <strong>buttons</strong></h4></header>
            </div>
            <div class="box-body text-center">
                <button type="button" class="btn btn-primary btn-loading-state" data-loading-text="<i class='fa fa-spinner fa-spin'></i> Loading...">Load example</button>
            </div><!--end .box-body -->
        </div><!--end .box -->
    </div><!--end .col-lg-4 -->
    <!-- END LOADING BUTTONS -->

    <!-- START TOGGLE BUTTONS -->
    <div class="col-lg-4">
        <div class="box box-underline">
            <div class="box-head">
                <header><h4 class="text-light">Toggle <strong>buttons</strong></h4></header>
            </div>
            <div class="box-body text-center">
                <div class="btn-group" data-toggle="buttons">
                    <label class="btn btn-primary btn-outline btn-equal">
                        <input type="checkbox"> <i class="fa fa-male"></i>
                    </label>
                    <label class="btn btn-primary btn-outline btn-equal">
                        <input type="checkbox"> <i class="fa fa-map-marker"></i>
                    </label>
                </div>
                <div class="btn-group" data-toggle="buttons">
                    <label class="btn btn-primary btn-outline btn-rounded active">
                        <input type="radio" name="options" id="option1"><i class="fa fa-male"></i> Male
                    </label>
                    <label class="btn btn-primary btn-outline btn-rounded">
                        <input type="radio" name="options" id="option2"><i class="fa fa-question"></i> Unknown
                    </label>
                    <label class="btn btn-primary btn-outline btn-rounded">
                        <input type="radio" name="options" id="option3"><i class="fa fa-female"></i> Female
                    </label>
                </div>
            </div><!--end .box-body -->
        </div><!--end .box -->
    </div><!--end .col-lg-4 -->
    <!-- END TOGGLE BUTTONS -->

</div><!--end .row -->
    <div class="row">

    <!-- START BLOCK BUTTONS -->
    <div class="col-lg-12">
        <div class="box box-underline">
            <div class="box-head">
                <header><h4 class="text-light">Block <strong>buttons</strong></h4></header>
            </div>
            <div class="box-body">
                <div class="row">
                    <div class="col-lg-2">
                        <a href="#" class="btn btn-default btn-block btn-labeled">
                            <span><i class="fa fa-envelope"></i></span>
                            <div>Inbox</div>
                            <span class="label label-default">12</span>
                        </a>
                    </div>
                    <div class="col-lg-2">
                        <a href="#" class="btn btn-primary btn-block btn-labeled">
                            <span><i class="fa fa-calendar"></i></span>
                            <div>Calendar</div>
                            <span class="label label-warning">12</span>
                        </a>
                    </div>
                    <div class="col-lg-2">
                        <a href="#" class="btn btn-primary btn-block">Block button 1</a>
                        <a href="#" class="btn btn-support1 btn-block">Block button 2</a>
                    </div>
                    <div class="col-lg-2">
                        <a href="#" class="btn btn-primary btn-outline btn-block">Block button 3</a>
                        <a href="#" class="btn btn-support1 btn-outline btn-block">Block button 4</a>
                    </div>
                    <div class="col-lg-2">
                        <a href="#" class="btn btn-outline btn-primary btn-block btn-labeled">
                            <span><i class="fa fa-group"></i></span>
                            <div>Contacts</div>
                            <span class="label label-warning">12</span>
                        </a>
                    </div>
                    <div class="col-lg-2">
                        <a href="#" class="btn btn-outline btn-default btn-block btn-labeled">
                            <span><i class="fa fa-envelope"></i></span>
                            <div>Inbox</div>
                            <span class="label label-danger">12</span>
                        </a>
                    </div>
                </div><!--end .row -->
            </div><!--end .box-body -->
        </div><!--end .box -->
    </div><!--end .col-lg-12 -->
    <!-- END BLOCK BUTTONS -->

</div><!--end .row -->
</div>
<script>
    $(function(){
        $('.btn-loading-state').click(function() {
            var btn = $(this);
            btn.button('loading');
            setTimeout(function() {
                btn.button('reset');
            }, 3000);
        });
    });
</script>